import React, { useState, useEffect } from 'react'
import { Input, DatePicker, Select, Form, Radio, Button } from 'antd';
import Answer from "../../../../components/Record/answer"
import { addNewRecprd, getRecordDetail } from "../../../../api/myRecord"
import "./index.scss"
const { Option } = Select;

export default function EditRecord(props) {
    const getNewMessage = async () => {
        let res = await getRecordDetail(props.match.params.id)
        console.log(res.data);
        setStationName(res.data.data.stationName)
        setCompanyName(res.data.data.companyName)
        setInterviewTime(res.data.data.interviewTime)
        setDuration(res.data.data.duration)
        setSite(res.data.data.site)
        setIntervierManagement(res.data.data.intervierManagement)
        setRecord(res.data.data.record)
        setStatus(res.data.data.status)
        setIssoundrecord(res.data.data.issoundrecord)
        setAskAndanswerList(res.data.data.askAndanswerList)
    }
    useEffect(() => {
        getNewMessage()
    }, [])
    const [stationName, setStationName] = useState("")
    const [companyName, setCompanyName] = useState("")
    const [interviewTime, setInterviewTime] = useState("")
    const [duration, setDuration] = useState("")
    const [site, setSite] = useState("")
    const [intervierManagement, setIntervierManagement] = useState("")
    const [record, setRecord] = useState("")
    const [status, setStatus] = useState(0)
    const [issoundrecord, setIssoundrecord] = useState(0)
    const [askAndanswerList, setAskAndanswerList] = useState("")

    const [value, setValue] = useState(0);
    const [val, setVal] = useState(1);
    const [anwsersNumber, setAnwsersNumber] = useState(1)
    const [anwsers, setAnwsers] = useState([
        {
            id: 1,
            question: "",
            answer: ""
        }
    ])
    function onChange(date, dateString) {
        console.log(dateString);
        setInterviewTime(dateString)
    }
    const onOne = e => {
        setValue(e.target.value);
        setStatus(e.target.value)
    };
    const onTwo = e => {
        console.log('radio checked', e.target.value);
        setVal(e.target.value);
        setIssoundrecord(e.target.value)
    };
    const addanswer = async () => {
        let a = anwsersNumber + 1
        await setAnwsersNumber(a)
        await setAnwsers([...anwsers, { id: a, question: "", answer: "" }])
    }
    const deleteanswer = () => {
        if (anwsersNumber === 1) {
        } else {
            setAnwsersNumber(anwsersNumber - 1)
            anwsers.pop()
        }
    }
    const setanswer = (id, question, answer) => {
        console.log(id, question, answer);
        let ques = anwsers.find(item => item.id === id)
        if(ques){
            ques.answer=answer
            ques.question=question
        }
        // anwsers.find(item => item.id === id).answer = answer
        console.log(anwsers);
        setAskAndanswerList(anwsers)
    }
    const submit = async () => {
        let res = await addNewRecprd({
            stationName,
            // 岗位名称
            companyName,
            // 公司名称
            interviewTime,
            // 面试时间
            duration,
            // 时长
            site,
            // 地点intervierManagement
            intervierManagement,
            // 面试官
            marjorName: "北京网站",
            // 专业

            commitName: "黄辉",
            // 提交人
            record,
            // 记录/吐槽
            status,
            // 面试结果
            issoundrecord,
            // 录音文件
            askAndanswerList,
            interviewId:props.match.params.id
        });
        if (res.data.code === 200) {
            props.history.push("/home/interview/myRecord")
        }
    }
    return (
        <div className="addrecord">
            <h1><span>添加面试记录</span></h1>
            <Form>
                <div>
                    <span><b>岗位名称</b><Input placeholder="请输入你的岗位" value={stationName} onChange={(e) => { setStationName(e.target.value) }} /></span>
                    <span><b>公司名称</b><Input placeholder="请输入你的公司" value={companyName} onChange={(e) => { setCompanyName(e.target.value) }} /></span>
                </div>
                <div>
                    <span><b>面试时间</b><DatePicker  showTime onChange={onChange} /></span>
                    <span><b>时长</b>
                        <Select placeholder="选择面试的时间" value={duration}  onChange={(e) => {
                            setDuration(e)
                        }}
                            allowClear>
                            <Option value="半小时">半小时</Option>
                            <Option value="半小时到一小时">半小时到一小时</Option>
                            <Option value="一小时以上">一小时以上</Option>
                        </Select>
                    </span>
                </div>
                <div>
                    <span><b>地点</b><Input value={site} placeholder="输入你面试的地点" onChange={(e) => { setSite(e.target.value) }} /></span>
                    <span><b>面试官</b><Input value={intervierManagement} placeholder="输入面试官" onChange={(e) => { setIntervierManagement(e.target.value) }} /></span>
                </div>
                <div>
                    <span><b>专业</b><span>北京网站</span></span>
                    <span><b>提交人</b><span>黄辉</span></span>
                </div>
                <div className="rightNow">
                    <b>记录-吐槽</b>
                </div>
                <Input.TextArea className="rightNow1 rightNow2" value={record} placeholder="请输入你的小作文" onChange={(e) => {
                    setRecord(e.target.value)
                }} />
                <div className="rightNow">
                    <b>面试结果</b>
                    <Radio.Group onChange={onOne} value={status}>
                        <Radio value={0}>不确定</Radio>
                        <Radio value={1}>通过</Radio>
                        <Radio value={2}>不通过</Radio>
                    </Radio.Group>
                </div>
                <div className="rightNow">
                    <b>录音文件</b>
                    <Radio.Group onChange={onTwo} value={issoundrecord}>
                        <Radio value={0}>无</Radio>
                        <Radio value={1}>有</Radio>
                    </Radio.Group>
                </div>
                <div className="rightNow">
                    <b>面试问题</b>

                </div>
                {
                    askAndanswerList&&askAndanswerList.map((item, index) => {
                        return <Answer answer={item.answer} question={item.question}  key={index} id={item.id} setA={setanswer} deleteAnswer={deleteanswer} addAnswer={addanswer} />
                    })
                }
                <Button className="rightNow1" onClick={() => {
                    submit()
                }}>提交</Button>
            </Form>

        </div>
    )
}
